<template>
    <div class="router-item-page">
        <div class="options-view">
            <el-button type="primary" size="small" @click="openCreate">新增</el-button>
        </div>
        <div class="table-view">
            <div class="table-list">
                <el-table row-key="id" :data="tableData" border style="width: 100%;height:100%">
                    <el-table-column prop="name" label="名称" width=220 />
                    <el-table-column prop="path" label="路径" width=180 />
                    <el-table-column prop="method" label="方法" width=180>
                        <template #default="scope">
                            <el-select v-model="scope.row.method" disabled>
                                <el-option v-for="item in apiOptions" :key="item" :label="item" :value="item" />
                            </el-select>
                        </template>
                    </el-table-column> 
                    <el-table-column prop="status" label="状态" width=60 />
                    <el-table-column prop="update_time" label="更新时间" width=240 />
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button type="primary" size="small" @click="openEdit(scope.row)">编辑</el-button>
                            <el-button type="danger" size="small" @click="openDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page-helper">
                <el-pagination background layout="prev, pager, next" :total="totle" />
            </div>
        </div>
    </div>

    <el-dialog v-model="showCreate" width="400" style="padding: 0 48px 48px 24px;">
        <div class="dialog-title">新增</div>
        <el-form :model="createObj" label-width="60px">
            <el-form-item label="名称">
                <el-input v-model="createObj.name" class="dialog-input" placeholder="请输入名称" />
            </el-form-item>
            <el-form-item label="上级">
                <el-select v-model="createObj.father">
                    <el-option v-for="item in fatherOptions" :key="item.value" :label="item.name" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="路径">
                <el-input v-model="createObj.path" class="dialog-input" placeholder="请输入地址" />
            </el-form-item>
            <el-form-item label="方法">
                <el-select v-model="createObj.method">
                    <el-option v-for="item in apiOptions" :key="item" :label="item" :value="item" />
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="sureCreate">确 定</el-button>
            <el-button @click="showCreate = false">取 消</el-button>
        </div>
    </el-dialog>

    <el-dialog v-model="showEdit" width="400" style="padding:  0 48px 48px 24px;">
        <div class="dialog-title">修改</div>
        <el-form :model="editObj" label-width="60px">
            <el-form-item label="名称">
                <el-input v-model="editObj.name" class="dialog-input" placeholder="请输入名称" />
            </el-form-item>
            <el-form-item label="上级">
                <el-select v-model="editObj.father">
                    <el-option v-for="item in fatherOptions" :key="item.value" :label="item.name" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="路径">
                <el-input v-model="editObj.path" class="dialog-input" placeholder="请输入地址" />
            </el-form-item>
            <el-form-item label="方法">
                <el-select v-model="editObj.method">
                    <el-option v-for="item in apiOptions" :key="item" :label="item" :value="item" />
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="sureEdit">确 定</el-button>
            <el-button @click="showEdit = false">取 消</el-button>
        </div>
    </el-dialog>

    <el-dialog v-model="showDelete" width="400" style="padding:  0 48px 48px 24px;">
        <div class="dialog-title">删除</div>
        <el-form :model="deleteObj" label-width="60px">
            <el-form-item label="名称">
                <el-input v-model="deleteObj.name" disabled class="dialog-input" placeholder="请输入名称" />
            </el-form-item>
            <el-form-item label="路径">
                <el-input v-model="deleteObj.path" disabled class="dialog-input" placeholder="请输入地址" />
            </el-form-item>
            <el-form-item label="方法">
                <el-select v-model="deleteObj.method" disabled>
                    <el-option v-for="item in apiOptions" :key="item" :label="item" :value="item" />
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="sureDelete">确 定</el-button>
            <el-button @click="showDelete = false">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import apis from '@apis'
const tableData = ref([])
const apiOptions = ref(['GET', 'POST', 'PUT', 'DELETE', '列表'])
const fatherOptions = ref([])
const totle = ref(0)
const pageSize = 10
const currentPage = ref(1)

const createObj = ref({})
const showCreate = ref(false)
const openCreate = () => {
    createObj.value = { method: 'GET', father: 0, path: '' }
    showCreate.value = true
}
const sureCreate = () => {
    apis.apis.create(createObj.value).then(res => {
        showCreate.value = false
        initTableList()
    })
}

const editObj = ref({})
const showEdit = ref(false)
const openEdit = (row) => {
    showEdit.value = true
    editObj.value = JSON.parse(JSON.stringify(row))
    editObj.value.father = editObj.value.father || 0
}
const sureEdit = () => {
    apis.apis.update(editObj.value).then(res => {
        showEdit.value = false
        initTableList()
    })
    showEdit.value = false
}

const deleteObj = ref({})
const showDelete = ref(false)
const openDelete = (row) => {
    showDelete.value = true
    deleteObj.value = row
}
const sureDelete = () => {
    apis.apis.delet(deleteObj.value.id).then(res => {
        showDelete.value = false
        initTableList() 
    })
}



const initTableList = () => {
    apis.apis.gets().then(res => {
        tableData.value = res.apis
        const fathers = res.apis.filter(item => (item.father ==0 || !item.father))
        fatherOptions.value = [{ name: '无', value: 0 }]
        const childrens = res.apis.filter(item => (item.father && item.father!= 0))
        for (let i = 0; i < fathers.length; i++) {
            const father = fathers[i]
            const children = childrens.filter(item => (item.father == father.id))
            father.children = children 
            fatherOptions.value.push({ name: father.name, value: father.id })
        }
        tableData.value = fathers
    })
}
onMounted(() => {
    initTableList()
})
</script>